import React from 'react';
import base64url from "base64url";
import { connect } from 'dva'
import { routerRedux } from 'dva/router';
import JcEcharts from '../../../components/JcEcharts/index';
import { Icon, List, WhiteSpace, Flex, NoticeBar,Badge,DatePicker} from 'antd-mobile';
import styles from './dyadminister.less'

import ReactEchartsCore from 'echarts-for-react/lib/core';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/gauge';
import 'echarts/lib/chart/pie';


class dyadminister extends React.Component{
  constructor(props){
    super(props);
    this.state={
    }
  }
//支部跳转
  onChild = (code, name) => {
    const data = {code: code};
    this.props.dispatch(
      routerRedux.push({
        pathname: "/work/dyadministerChild",
        query: data,
      })
    )
  };
  render(){
    const orgList = [];
    // const orgData = this.props.list;
    const {num,men,EthnicMinorities,women,orgLists,percentage} =this.props.management;
    console.log(orgLists,"orgLists")
    // for (let key in orgLists) {
    //   orgList.push(orgLists[key])
    // }
    const Item = List.Item;
    const Brief = Item.Brief;

    let transferType={
      title : {
        text: '正式党员占比',
        x:'center',
        y:'bottom',
        textStyle:{
          color:'#ffffff',
          fontSize:'.5rem'
        },
        top:'78%',
        left:'10%'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        x: 'left',
      },
      series: [
        {
          name:'访问来源',
          type:'pie',
          radius: ['40%', '60%'],
          center:['40%','40%'],
          avoidLabelOverlap: false,
          hoverAnimation:false,
          silent:true,
          label: {
            normal: {
              show: true,
              position: 'center',
              formatter:function(){
                return percentage
              },
              textStyle:{
                fontSize:30,
                color:'white'
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data:[
            {value:335, name:'97%',
              itemStyle:{
                normal:{color:'white'}
              }
            },
            {value:50,
              itemStyle:{
                normal:{color:'#FF6865'}
              }
            },

          ]
        }
      ]
    };
    return(

      <div>
        <div className={styles.bg}>
          <div style={{float:'left',width:'50%'}}>
            <p>|党员[<Badge text="2017年10月" style={{ marginLeft: 12 }} />]</p>
            <span style={{fontSize:'0.5rem'}}>{num}</span><br/>
            <span>党员总数</span>
            <br/>
            <p>少数民族党员:{EthnicMinorities}</p>
          </div>
          <div style={{height:'2rem',float:'left',width:'50%'}}>
            {/*<JcEcharts type="pie" data={transferType}/>*/}
            {/*<div>*/}
            {/*<span style={{marginBottom:'0.1rem'}}>正式党员占比</span>*/}
            {/*</div>*/}

            <ReactEchartsCore
              echarts={echarts}
              option={transferType}
              notMerge={true}
              lazyUpdate={true}
            />
          </div>
          <hr style={{width:'80%',marginLeft:'0.08rem'}}/>
          <div style={{width:'100%',marginTop:'0.3rem'}}>
            <div style={{width:'42%',display: 'inline-block',fontSize:'0.256rem'}}><Icon style={{verticalAlign:'middle'}} type={require('../../../svgs/work/nan.svg')} /><span style={{verticalAlign:'middle'}}>男性党员：{men}</span></div>|
            <div style={{width:'50%',display: 'inline-block',marginLeft:'0.2rem',fontSize:'0.256rem'}}><Icon style={{verticalAlign:'middle'}} type={require('../../../svgs/work/nv.svg')} /><span style={{verticalAlign:'middle'}}>女性党员：{women}</span></div>
          </div>
        </div>
        <WhiteSpace/>
        <NoticeBar icon={<Icon type={require('../../../svgs/work/dangyuan.svg')}/>} action={<span style={{ color: '#a1a1a1' }}>10秒前</span>}>
          &nbsp;&nbsp;&nbsp;&nbsp;郑成功&nbsp;&nbsp;成功转正
        </NoticeBar>
        <WhiteSpace/>
        <div>
          {this.props.management&&
          <List className="my-list">
            {
              orgLists.map((it) => {
                return <Item key={it.code} style={{marginTop: '0.2rem'}}  onClick={()=>this.onChild(it.code)}>
                  {it}
                  <p className={styles.number} style={{fontSize: '0.28rem', color: '#ABABAB'}}>
                  <span>党员总数：368</span>
                  <span>正式党员：357</span>
                  <span>少数民族党员：12</span>
                </p>
                </Item>
              })
            }
          </List>
          }
        </div>
      </div>
    )
  }
}

function mapStateToProps({management}) {
  console.log("management",management);
return{management}
}
export default connect(mapStateToProps)(dyadminister);
